import React from "react";
import { connect, useDispatch, useSelector } from 'react-redux'
// import { bindActionCreators } from "redux";
import * as counterActions from '../../store/action/counter'
import { getInfo } from "../../store/action/async";

const ReduxDemo = (props) => {
    const counterState = useSelector(state=>state.counter)
    const asyncState = useSelector(state=>state.async)
    const dispath = useDispatch()
    return(
        <div>
            <h2>当前值:{counterState}</h2>
            <button onClick={()=>dispath(counterActions.decrease())}>-1</button>
            <button onClick={()=>dispath(counterActions.increase())}>+1</button>
            <br />
            <h2>异步获取值：{JSON.stringify(asyncState)}</h2>
            <button onClick={()=>dispath(getInfo())}>异步获取数据</button>
        </div>
    )
}

// const mapStateToProps = state => {
//     return {
//         state
//     }
// }

// const mapDispathToProps = dispath => {
//     return{
//         // increase: () => dispath(counterActions.increase()),
//         // decrease: () => dispath(counterActions.decrease())
//         counterActions: bindActionCreators(counterActions, dispath)
//     }
// }

export default ReduxDemo